<template>
  <div class="home">
    <div class="row">
      <div class="data">
        <p>文章总数</p>
        <div>
          <ReadOutlined class="icon" />
          <span class="count">
            {{ articles.articleCount }}
          </span>
        </div>
      </div>
      <div class="data">
        <p>阅读总数</p>
        <div>
          <CommentOutlined class="icon" />
          <span class="count">
            {{ articles.readCount }}
          </span>
        </div>
      </div>
      <div class="data">
        <p>文章扩散总数</p>
        <div>
          <SendOutlined class="icon" />
          <span class="count">
            {{ articles.channelCount }}
          </span>
        </div>
      </div>
      <div class="data">
        <p>点赞人数</p>
        <div>
          <LikeOutlined  class="icon" />
          <span class="count">
            {{ articles.likeCount }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { ReadOutlined,LikeOutlined ,SendOutlined,CommentOutlined} from "@ant-design/icons-vue";

export default {
  name: "Home",
  components: {
    ReadOutlined,
    LikeOutlined,
    SendOutlined,
    CommentOutlined
  },
  computed: {
    articles() {
      const articles = this.$store.getters.getArticles(0, 0);
      let channelCount = 0;
      let readCount = 0;
      let likeCount = 0;
      for (let item in articles) {
        const channels = articles[item].channels;
        for (let chann in channels) {
          (channelCount += 1),
            (readCount += parseInt(
              channels[chann].read ? channels[chann].read : 0
            ));
          likeCount += parseInt(
            channels[chann].like ? channels[chann].like : 0
          );
        }
      }
      let info = {
        articleCount: articles.length,
        channelCount: channelCount,
        readCount: readCount,
        likeCount: likeCount,
      };
      return info;
    },
  },
};
</script>
<style lang="stylus" scoped>
.home {
  .row {
    display: flex;
    flex-wrap wrap
    .data {
      flex-grow: 1;
      padding: 20px;
      background-color: #f5f5f5;
      color: #666;
      margin 10px
      .icon {
        font-size: 30px;
      }

      .count {
        margin: 0 10px;
        font-size: 23px;
        font-weight: bold;
      }
    }
  }
}
@media screen and (max-width: 700px) {
    .data {
      
    }
}
</style>
